<template>
  <edit-drawer
    :loading="loading"
    :drawer="drawer"
    :size="600"
    :close="cancel"
    :confirm="confirm"
    :title="title"
  >
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-width="80px"
      class="demo-ruleForm"
    >
      <el-form-item label="用户名" prop="name">
        <el-input v-model="ruleForm.name" type="text"></el-input>
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="ruleForm.email" type="text"></el-input>
      </el-form-item>
    </el-form>
  </edit-drawer>
</template>

<script>
import editDrawer from "@/components/cl-components/drawer/index.vue";
import { nextTick, reactive, ref, toRefs, computed } from "vue";
import { ElMessage } from "element-plus";
import axios from "@/utils/axios";

export default {
  name: "edit",
  components: {
    editDrawer,
  },
  emits: ["refresh"],
  setup(props, context) {
    //ruleFormRef
    const ruleFormRef = ref(null);

    const state = reactive({
      id: null,
      drawer: false,
      loading: false,
      rolesList: [],
      type: null, //new || edit
      ruleForm: {
        name: "",
        email: "",
      },
    });
    //title
    const title = computed(() => {
      if (state.type === "new") {
        return "添加";
      }
      return "修改";
    });
    //表单校验规则
    const rules = computed(() => {
      return {
        name: [
          {
            required: true,
            message: "姓名不能为空",
            trigger: "blur",
          },
        ],
      };
    });
    //打开窗口
    const open = (type, data) => {
      state.drawer = true;
      state.type = type;
      if (type === "new") {
        state.id = null;
        return;
      }
      nextTick(() => {
        for (const key in state.ruleForm) {
          state.ruleForm[key] = data[key];
        }
        state.id = data.id;
      });
    };

    //关闭窗口
    const cancel = () => {
      state.id = null;
      state.type = null;
      state.loading = false;
      ruleFormRef.value.resetFields();
      state.drawer = false;
    };

    //confirm
    const confirm = () => {
      ruleFormRef.value.validate((valid) => {
        if (valid) {
          state.loading = true;
          let data = { ...state.ruleForm };
          if (state.type === "edit") {
            data.id = state.id;
            update(data);
          } else if (state.type === "new") {
            addNew(data);
          }
        }
      });
    };

    //新增
    const addNew = (data) => {
      let httpOption = axios.post;
      httpOption("/api/admin/usersAdd", data).then((res) => {
        state.loading = false;
        if (res.data.code === 200) {
          ElMessage.success(res.data.msg);
          context.emit("refresh");
          cancel();
        }
      });
    };

    //update
    const update = (data) => {
      let httpOption = axios.post;
      httpOption(`/api/admin/users/${state.id}`, data).then((res) => {
        state.loading = false;
        if (res.data.code === 200) {
          ElMessage.success(res.data.msg);
          context.emit("refresh");
          cancel();
        }
      });
    };
    return {
      ...toRefs(state),
      title,
      ruleFormRef,
      rules,
      open,
      cancel,
      confirm,
    };
  },
};
</script>

<style lang="scss" scoped>
</style>